<template>
  <div class="videoApp full-width full-height"  v-loading="loading">
    <div class="headBar">
      <span class="title">{{  label }}</span>
    </div>    
    <div v-if="videoType === 1" :id="`video-${index}`"></div>
    <!-- <div v-if="videoType === 1" :id="`video-${index}`"></div> -->
    <div v-else :id="`video-${index}`" ref="videoWarp" controls autoplay="false" class="full-width full-height bg-black" />
  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js';
import HlsJsPlayer from "xgplayer-hls.js";
import $ from 'jquery';

export default {
  props: {
    url: {
      type: String,
      default: () => ''
    },
    setWidth: {
      type: Number,
      default: () => 0
    },
    setHeight: {
      type: Number,
      default: () => 0
    },
    videoToken: {
      type: String,
      default:''
    },
    index: {
      type:Number,
      default: 0
    },
    label: {
      type: String,
      default: ''
    },
    videoType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      player: null,
      loading: false,
      timer: null,
      theme: {
        // 设置底部toolbar自动隐藏时间 默认不显示
        autoFocus: 5,
        header: {
          color: '#1890ff',
          activeColor: '#FFFFFF',
          backgroundColor: '#00000080',
          btnList: []
        },
        footer: {
          autoFocus: 5,
          color: '#FFFFFF',
          activeColor: '#1890FF',
          backgroundColor: '#00000080',
          btnList: [
            {
              iconId: 'play',
              part: 'left',
              defaultActive: 1,
              memo: '播放',
              isrender: 1
            },
            {
              iconId: 'sound',
              part: 'left',
              defaultActive: 0,
              memo: '声音按钮',
              isrender: 1
            },
            {
              iconId: 'pantile',
              part: 'left',
              defaultActive: 0,
              memo: '云台控制按钮',
              isrender: 1
            },
            {
              iconId: 'expend',
              part: 'right',
              defaultActive: 0,
              memo: '全局全屏按钮',
              isrender: 1
            }
          ]
        }
      }
    };
  },
  methods: {
    init() {
      this.onDestroy();
      this.loading = true;
      if ( this.videoType === 1) {
        this.player = new EZUIKit.EZUIKitPlayer({
          /**
           * @id: 视频容器ID 必传
           * @template: simple - 极简版; pcLive - 直播；pcRec - 回放；0eba7c2400704180a3168700a3a75e95 - 自定义模板id；
           * @theme: 本地模板 可自定义
           * 免费版限制每日调取接口一万次 为减少接口调取次数 使用本地themeData配置
           * 配置参考：/node_modules/ezuikit-js/demos/base-demo/themeData
           * */
          id: `video-${this.index}`,
          autoplay: false,
          accessToken: this.videoToken,
          url: this.url,
          template: 'pcLive',
          themeData: this.theme,
          width: $('.videoApp').width(),
          height:  $('.videoApp').height()
        });
      } else {
        this.xgsp = new HlsJsPlayer({
          id: `video-${this.index}`,
          url: this.url,
          autoplay: false,
          playsinline: true,
        })
        
        // this.player = new EZUIKit.HLS(
        //   `video-${this.index}`, 
        //   this.url
        // );
      }
      this.loading = false;
    },
    changeUrl() {
      this.loading = true;
      this.$nextTick(() => {
        this.player && this.player.changePlayUrl({
          url: this.url
        }).then(() => {
          // 添加定时器 优化切换效果
          if (this.timer) clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(this.timer);
          }, 1000);
        }).catch(() => {
          this.loading = false;
          this.$message.warning('视频切换失败，请刷新后再试');
        });
      });
    },
    onDestroy() {
      this.player && this.player.stop && this.player.stop();
      this.xgsp && this.xgsp.hls.destroy();
    }
  },
  mounted() {
    this.init();
    window.onresize = () => {
      this.$nextTick(() => {
        this.player && this.player.reSize($('.videoApp').width(),$('.videoApp').height());
      })
    };
  },
  beforeDestroy() {
    console.log('我要离开了')
    this.onDestroy();
  }
};
</script>
<style lang="scss">
  .videoApp{
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
    height: 100%!important;
    position: relative;
    width: 100%!important;
    .headBar {
      padding: 0 10px;
      background: linear-gradient(#000,rgba(129,131,137,0));
      position: absolute;
      width: 100%;
      height: 40px;
      position: absolute;
      z-index: 1000;
      text-align: right;
      line-height: 40px;
      span:first-child {
        display: inline-block;
        margin-right: auto;
        color: #fff;
        text-align: left;
        font-size: 1rem;
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        &::before {
          content: "";
          display: inline-block;
          width: 3px;
          height: 9px;
          background: #027aff;
          border-radius: 2px;
          margin: 0 8px 0 8px;
        }
      }
      .fav {
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 5px;
        margin-right: 16px;
        // margin-left: auto;
        cursor: pointer;
        justify-content: flex-end;
        img {
          width: 20px;
          height: 20px;
          margin-right: 2px;
        }
        span {
          color: #fff;
          text-align: center;
          font-size: 1rem;
          font-weight: 400;
          line-height: 2rem;
          &.isFav {
            color: rgb(254, 217, 2);
          }
        }
      }
      span:nth-of-type(2) {
        margin-right: 1rem;
        text-align: center;
        background-color: #e91916;
        font-size: 0.8rem;
        font-weight: 600;
        color: #fff;
        border-radius: 4px;
        padding: 0 2px 0 3px;
        letter-spacing: 1px;
      }
    }    
    // #video-container-wrap,#video-container,.video-containerparent-wnd,.loading-item{
    //   height: 100%!important;
    //   width: 100%!important;
    // }
    // .video-containerparent-wnd{
    //   >div,canvas{
    //     height: 100%!important;
    //     width: 100%!important;
    //   }
    // }
  }
</style>
